<%--
  Created by IntelliJ IDEA.
  User: 王浩然
  Date: 2022/6/5
  Time: 15:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">

    <script src="${pageContext.request.contextPath}/static/qrcode.js"></script>
    <title>用户表</title>
  </head>
  <body>
<%--  修改页面--%>
  <form class="layui-form" id="updateUsers" style="display: none" lay-filter="updateForm"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-inline">
      <label class="layui-form-label">id</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">测试名称</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="text" name="testName" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">开始时间</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="text" name="testBegin" placeholder="请输入" id="updateBeginDate" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">结束时间</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="text" name="testEnd" placeholder="请输入" id="updateEndDate" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">测试类型</label>
      <div class="layui-input-inline">
        <select name="testType" lay-verify="" id="updateTestType">

        </select>
      </div>
    </div>
    <div class="layui-input-block">
      <button type="button" class="layui-btn "  lay-submit lay-filter="updateUsers">确认修改</button>
      <button type="button" class="layui-btn layui-btn-danger" lay-filter="remove">清空</button>
    </div>
  </form>
<%--//添加录入框--%>
  <form class="layui-form" id="insertStudent" style="display: none"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-inline">
      <label class="layui-form-label">测试名称</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="text" name="testName" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">开始时间</label>
      <div class="layui-input-inline">
        <input type="text" id="insertBeginDate" class="layui-input" placeholder="开始日期" name="testBegin">
      </div>
    </div>
    <div  class="layui-form-item">
      <label class="layui-form-label">结束时间</label>
      <div class="layui-input-inline">
        <input type="text" id="insertEndDate" class="layui-input" placeholder="结束日期" name="testEnd">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">测试类型</label>
      <div class="layui-input-inline">
        <select name="testType" lay-verify="" id="testType">

        </select>
      </div>
    </div>

    <div class="layui-input-block">
      <button type="button" class="layui-btn " lay-filter="insert" lay-submit>确认添加</button>
      <button type="button" class="layui-btn layui-btn-danger" lay-filter="remove">清空</button>
    </div>
  </form>

<%--头部工具栏--%>
    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button type="button" class="layui-btn" lay-event="add">添加</button>
        <button type="button" class="layui-btn" lay-event="delete">删除</button>
      </div>
    </script>
<%--行内工具栏--%>
    <script type="text/html" id="barDemo">
      <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="show">显示二维码</button>
        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="update">修改</button>
        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="more">删除</button>
      </div>
    </script>
<%--模糊查询--%>
    <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
      <div class="layui-inline">
        <label class="layui-form-label">测试名称</label>
        <div class="layui-input-inline">
          <input type="text" name="testName" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">测试密钥</label>
        <div class="layui-input-inline">
          <input type="text" name="testCode" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <button class="layui-btn" lay-submit lay-filter="selectUsers">查询</button>
          <button type="reset" class="layui-btn layui-btn-primary" id="remove">重置</button>
        </div>
      </div>
    </form>
    <%--    二维码显示页面   --%>
    <div id="qrcode" style="display: none"></div>


    <table id="demo" lay-filter="test"></table>

  <script>
    layui.use(['table','form','jquery','laydate'], function(){
      var table = layui.table;
      var form = layui.form;
      var $ = layui.jquery;
      var laydate = layui.laydate
      $(this).removeAttr("lay-key")
      //第一个实例
      table.render({
        elem: '#demo'
        ,height: 500
        ,url: '${pageContext.request.contextPath}/testPlanFpa/select.do' //数据接口
        ,page: true //开启分页
        ,limit:5
        ,limits:[5,10,15,20]
        ,autoSort:true
        ,toolbar: '#toolbarDemo'
        ,cols: [[ //表头\
          {type: 'checkbox', fixed: 'left'}
          ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
          ,{field: 'testName', title: '测试名称', width:90}
          ,{field: 'testCode', title: '测试密钥', width:90}
          ,{field: 'testBegin', title: '开始时间', width:160}
          ,{field: 'testEnd', title: '结束时间', width:160}
          ,{field: 'createTime', title: '创建时间', width:160}
          ,{field: 'creataBy', title: '创建人', width:90}
          ,{field: 'testType', title: '测试类型', width: 100}
          ,{fixed: 'right', title:'操作',  width: 200, align:'center', toolbar: '#barDemo'}
        ]]
      });
      //模糊查询
      form.on('submit(selectUsers)', function(data){
        console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        table.reload("demo",{
          where:{
            testName:data.field.testName,
            testCode:data.field.testCode
          },
          page:{
            curr:1
          }
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });

      //监听头工具栏事件
      table.on('toolbar(test)', function(obj) {
        var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
        console.log(data)
        switch (obj.event) {
                //添加一行
          case 'add':
            // 动态获取部门信息，并追加到下拉列表
            $.ajax({
              url: "${pageContext.request.contextPath}/testType/select.do",
              type: "POST",
              dataType: "JSON",
              success: function (ret) {
                if (ret.code == 0) {
                  var htmlStr = "";
                  for (let i = 0; i < ret.data.length; i++) {
                    htmlStr += "<option>"+ret.data[i]+"</option>"
                  }
                  console.log(htmlStr)
                  $("#testType").html(htmlStr);
                  //重新渲染表单
                  layui.use('form', function () {
                    var form = layui.form;
                    form.render('select');
                  })
                }
              }
            });
            //弹出对话框填写添加信息
            layer.open({
              title:"添加用户",
              type:1,
              content:$("#insertStudent"),
              area:['500px','500px']
            })
            //监听submit提交
            form.on('submit(insert)', function(data){
              // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
              // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
              // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
              $("#load").click();
              $.ajax({
                url:"${pageContext.request.contextPath}/testPlanFpa/insert.do",
                data:data.field,
                dataType:"json",
                type:"post",
                success:function (a){
                  if (a.code==0){
                    layer.closeAll()
                    table.reload('demo',{
                      page:{
                        curr:1
                      }
                    })
                  }
                  layer.msg(a.msg)
                }
              })
              return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            break;
          case 'delete':
            if(data.length === 0){
              layer.msg('请选择一行');
            } else {
              var userids=[]
              for (var i=0;i<data.length;i++){
                userids[i]=data[i].id;
              }
              console.log(userids.join(","))
              layer.confirm('真的删除么', function(index){
                //确定后进入后台删除数据
                $.ajax({
                  url: "${pageContext.request.contextPath}/testPlanFpa/delete.do",
                  data:{
                    id:userids.join(",")
                  },
                  dataType:"json",
                  type: "post",
                  success:function (a){
                    if (a.code==0){
                      //关闭所有对话框
                      layer.closeAll();
                      table.reload('demo',{
                        page:{
                          curr: 1
                        }
                      })
                    }
                  }
                })
              })
            }
            break;
        }
      })

      //监听行工具事件
      table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'more'){
          layer.confirm('真的删除行么', function(index){
            console.log(data.userid)
              $.ajax({
                url:"${pageContext.request.contextPath}/testPlanFpa/delete.do",
                data:{
                  id:data.id
                },
                dataType:"json",
                type:"post",
                success:function (a){
                  if (a.code==0){
                    table.reload('demo')
                  }
                  layer.msg(a.msg)
                }
              })
          })
        }else if (layEvent === 'update'){
          // 动态获取部门信息，并追加到下拉列表
          $.ajax({
            url: "${pageContext.request.contextPath}/testType/select.do",
            type: "POST",
            dataType: "JSON",
            success: function (ret) {
              if (ret.code == 0) {
                var htmlStr = "";
                for (let i = 0; i < ret.data.length; i++) {
                  htmlStr += "<option>"+ret.data[i]+"</option>"
                }
                console.log(htmlStr)
                $("#updateTestType").html(htmlStr);
                //重新渲染表单
                layui.use('form', function () {
                  var form = layui.form;
                  form.render('select');
                })
              }
            }
          });
          layer.open({
            title:"用户修改",
            type:1,
            content:$("#updateUsers"),
            area:['500px','500px']
          })
          form.val("updateForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "id": data.id // "name": "value"
            ,"testName": data.testName
            ,"testBegin":data.testBegin
            ,"testEnd":data.testEnd
          });
          form.on('submit(updateUsers)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
              url:"${pageContext.request.contextPath}/testPlanFpa/update.do",
              data:data.field,
              dataType:"json",
              type:"post",
              success:function (a){
                if (a.code==0){
                  layer.closeAll()
                  table.reload('demo')
                }
                layer.msg(a.msg)
              }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
          });
        }else if(layEvent === 'show'){

          // 简单方式
          // new QRCode(document.getElementById('qrcode'), 'https');

          // 生成二维码
          // 设置参数方式
          var qrcode = new QRCode('qrcode', {
            text: 'http://localhost:8080/views/user.jsp',
            width: 460,
            height: 460,
            colorDark : '#000000',
            colorLight : '#ffffff',
            correctLevel : QRCode.CorrectLevel.H
          });
          //展示出二维码
          layer.open({
            title:"二维码",
            type:1,
            content:$("#qrcode"),
            area:['500px','500px']
          })
        }

      });
      //重置
      $("#remove").click(function (){
        table.reload("demo",{
          where:{
            testName: ""
            ,testCode:""
          },
          page:{
            curr:1
          }
        })
      })
      //日期时间选择器
      laydate.render({
        elem: '#insertBeginDate'
        ,type: 'datetime'
      });
      //日期时间选择器
      laydate.render({
        elem: '#insertEndDate'
        ,type: 'datetime'
      });
      //日期时间选择器
      laydate.render({
        elem: '#updateBeginDate'
        ,type: 'datetime'
      });
      //日期时间选择器
      laydate.render({
        elem: '#updateEndDate'
        ,type: 'datetime'
      });
    });
  </script>
  </body>
</html>
